<template>
<div class="slideheader_box">
     <router-link tag="div" to="/usercenter" class="slidebarheader">
                <img src="../../assets/njrpic/userheaderpic.png" alt="">
                <div>
                        <p>{{this.$store.state.username}}</p>
                <div class="slidebar_coin">
                <img src="../../assets/njrpic/coin.png" alt="">
                <span>{{coin}}</span>
                </div>
                </div>
     </router-link>
        <el-divider></el-divider>
        <router-link tag="div" :to="item.linkto" v-for="(item,index) in barlist" :key="index">
        <div class="slidebarcontent">
            <!-- @/assets/njrpic/service.png -->
        <img :src="item.img" alt="">
        <span>{{item.title}}</span>
        </div>
        <el-divider></el-divider>
</router-link>
<router-link tag="div" to="/sushiservice" class="slidebarcontent dif">
            <!-- @/assets/njrpic/service.png -->
        <img src="@/assets/njrpic/service.png" alt="">
        <span>素士客服</span>
        </router-link>
        <el-divider></el-divider>
        <router-link tag="div" to="/partner" class="slidebarcontent dif">
            <!-- @/assets/njrpic/service.png -->
        <img src="@/assets/njrpic/partner.png" alt="">
        <span>合作商家</span>
        </router-link>
        <el-divider></el-divider>
<div class="slidebarcontent dif">
            <!-- @/assets/njrpic/service.png -->
        <img src="@/assets/njrpic/advocacy.png" alt="">
        <span>我要代言</span>
        </div>
    </div>
</template>
<script>
import { gsap } from 'gsap'

// import slidebarcontent from '@/components/njrcomponents/slidebarcontent.vue'
export default {
    data(){
        return{
            coincount:0,
            coin:0,
            barlist:[
               { img:'',
               title:'个人中心',linkto:'/usercenter'},
             { img:'',
               title:'功能介绍',linkto:'/function'},
               {img:'',
               title:'关于我们',linkto:'/about'},
            //      {img:'',
            //    title:'素士客服'}
            ]
        }
    },
    mounted(){
        this.$http.get('/api/users/'+this.$store.state.username).then(({
            data,config
        })=>{
                console.log(data,config);
            if(data.code==200){
                this.$message.success('查询成功')
                this.$store.commit('getcoin',data.data.coin)
                this.$store.commit('getId',data.data.id)
                console.log(this.$store.state.coin);
                this.coincount=data.data.coin
                gsap.to(this.$data, { duration: 0.5, coin: this.coincount.toFixed(0) });
                // console.log(this.coincount);
                // this.coinadd()
            }else{
                this.$message.error('查询失败')
            }
        })
    },
//      computed: {
//     updatecoin: function() {
//       return this.coin.toFixed(0);
//     }
//   },
//   watch: {
//     coincount: function(newValue) {
//         // const timeline = new TimelineLite()
//       gsap.to(this.coin, { duration: 0.5, tweenedNumber: newValue });
//     }
//   },
    // computed:{
    //     coinadd(){
    //         let cointimer=setInterval(function(){
    //                 this.coincount=this.coincount+1;
    //                 if(this.coincount==this.coin){
    //                     clearInterval(cointimer)
    //                 }
    //                 return this.coincount
    //             },100)
    //     }
    // },
    components:{
    }
}
</script>
<style lang="less" scoped>
.slideheader_box{
.slidebarheader{
    background-color: #e8edf1;
    display: flex;
    padding: 25px;
    align-items: center;
   >div{
           margin-left: 20px;
       .slidebar_coin{
            img{
           width: 15%;
           border-radius: 50%;
       }
       >span{
           margin-left: 5px;
           color: #f9d043;
       }
       }
   }
}
.slidebarheader+.el-divider{
       background-color: #d8dde1;
       height:10px;
       margin-top:0;
   }
   .slidebarcontent{
    display: flex;
    align-items: center;
    margin-left: 10%;
    img{
        margin-right: 15px;
    }
}
.slidebarcontent+.el-divider{
    margin-left: 15%;
}
.dif+.el-divider{
    margin-left:0;
    height:10px;
}
}

</style>